<template>
	<view>
		<view v-for="(item, i) in essay">
			<uni-card :cover="item.picture">
				<view class="message" @click="tz('/pages/bookDetail/bookDetail?id=',item.eid)">
					<text>这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
					<text>{{item.title}}</text>
					<text>{{item.author}}</text>
				</view>
				<template v-slot:actions>
					<view class="card-actions">
						<view class="card-actions-item" @click="share">
							<button class="separate-fl" plain="true" data-name="shareBtn" open-type="share">
								<uni-icons type="redo" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">分享</text>
							</button>
						</view>
						<view class="card-actions-item" @click.prevent="LikeClick(i)">
							<button class="separate-fl" plain="true" data-name="shareBtn">
								<uni-icons :type="icons[i]" size="18" v-if="icons[i] == 'heart'" color="#999">
								</uni-icons>
								<uni-icons :type="icons[i]" size="18" v-else color="#EB3324"></uni-icons>
								<!-- 								<uni-icons :type="icons[i]" size="18" :color="color[i]"></uni-icons> -->
								<!-- 								<uni-icons type="heart-filled" size="18" color="#EB3324"></uni-icons> -->
								<text class="card-actions-item-text">点赞</text>
							</button>
						</view>

						<view class="card-actions-item" @click="Comments(item.eid)">
							<button class="separate-fl" plain="true" data-name="shareBtn">
								<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">评论</text>
							</button>
						</view>

						<view class="card-actions-item">
							<!-- :checked="checkList[i]" -->
							<uni-fav :checked="checkList[i].iscollect" class="favBtn" :circle="true" bg-color="#dd524d"
								bg-color-checked="#007aff" fg-color="#ffffff" fg-color-checked="#ffffff"
								@click="favClick(i,item.eid)" />
						</view>
					</view>
				</template>
			</uni-card>
		</view>

		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" />
	</view>


</template>

<script>
	const audio = uni.createInnerAudioContext();
	/* 	const share = */
	export default {
		components: {},
		data() {
			return {
				isCollect: 0,
				checkList: [],
				state: 0,
				essay: {},
				playLists: {},
				playListDetail: {},
				icons: [],
				color: [],
				index: 0,
				read: {},
				/*  */
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#aaa',
					iconColor: '#fff',
					icon: 'headphones'
				},
				play: {
					iconPath: '/static/pause.png',
					selectedIconPath: '/static/pause.png',
					text: '播放',
					active: false
				},
				pause: {
					iconPath: '/static/play.png',
					selectedIconPath: '/static/play.png',
					text: '暂停',
					active: false
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/previous.png',
						selectedIconPath: '/static/previous.png',
						text: '上一首',
						active: false
					},
					{
						iconPath: '/static/pause.png',
						selectedIconPath: '/static/pause.png',
						text: '播放',
						active: false
					},
					{
						iconPath: '/static/next.png',
						selectedIconPath: '/static/next.png',
						text: '下一首',
						active: false
					}
				]
			}
		},
		created() {
			// this.queryAll();
			this.queryAllIsCollect();
			this.getPlayList();
			this.getPlayListAll(2520739691);
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '自定义分享标题',
				path: '/pages/measurement/measurement?id=123'
			}
		},
		methods: {
			favClick(index, id) {
				this.checkList[index].iscollect = !this.checkList[index].iscollect
				console.log(this.checkList[index].iscollect);
				this.queryState(index,id);
				// if (this.read == null) {
				// 	this.AddRead(id)
				// } else {
				// 	if (this.checkList[index].iscollect == false) {
				// 		this.state = 0
				// 	} else {
				// 		this.state = 1
				// 	}
				// 	this.changeState(id)
				// }


				this.$forceUpdate()
			},
			
			queryAllIsCollect(){
				uni.request({
					url: 'http://127.0.0.1:800/mhs/essay/queryAllIsCollect', //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.essay = res.data.data;
						console.log(this.essay);
						this.checkList = this.essay;
						for (var i = 0; i < this.checkList.length; i++) {
							this.icons[i] = "heart";
							this.color[i] = "#999";
							// this.checkList[i].is = this.essay.iscollect;
							if (this.checkList[i].iscollect == 1) {
								this.checkList[i].iscollect = true;
							} else {
								this.checkList[i].iscollect = false;
							}
						}
						
						console.log(this.checkList);
					},
				});
			},

			queryState(index,id) {
				uni.request({
					url: 'http://127.0.0.1:800/mhs/read/queryState?id=' + id, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.read = res.data.data;
						console.log(this.read);
						if (this.read == null) {
							this.AddRead(id)
						} else {
							if (this.checkList[index].iscollect == false) {
								this.state = 0
							} else {
								this.state = 1
							}
							this.changeState(id)
						}
					},
				});
			},

			AddRead(id) {
				console.log(id)
				uni.request({
					url: 'http://127.0.0.1:800/mhs/read/AddRead?id='+ id + "&state=1", //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						// this.read = res.data.data;
						console.log(this.res.data.data);
					},
				});
			},

			changeState(id) {
				uni.request({
					url: 'http://127.0.0.1:800/mhs/read/changeState?state=' + this.state + "&id=" + id, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.isCollect = res.data.data;
						console.log(this.isCollect);
					},
				});

			},
			Comments(id) {
				uni.navigateTo({
					url: '/pages/commentDetail/commentDetail?id=' + id
				})
			},
			share() {
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif				
			},
			LikeClick(i) {

				if (this.icons[i] == "heart") {
					this.icons[i] = 'heart-filled';
					this.color[i] = '#EB3324';

				} else {
					this.icons[i] = 'heart';
					this.color[i] = '#999';
				}

				console.log(this.icons[i])
				console.log(this.color[i])
			},
			// queryAll() {
			// 	uni.request({
			// 		url: 'http://127.0.0.1:800/mhs/essay/queryAll', //仅为示例，并非真实接口地址。
			// 		success: (res) => {
			// 			this.essay = res.data.data;
			// 			console.log(this.essay);
			// 			for (var i = 0; i < this.essay.length; i++) {
			// 				this.icons[i] = "heart";
			// 				this.color[i] = "#999";
			// 				this.checkList[i] = this.essay.iscollect;
			// 				if (this.checkList[i] == 0 || this.checkList[i] == null) {
			// 					this.checkList[i] = false;
			// 				} else {
			// 					this.checkList[i] = true;
			// 				}
			// 			}
			// 			console.log(this.checkList);
			// 		},
			// 	});

			// },
			// 获取推荐歌单
			getPlayList() {
				uni.request({
					url: 'http://127.0.0.1:3000/personalized', //仅为示例，并非真实接口地址。
					success: (res) => {
						this.playLists = res.data;
						console.log(this.playLists)
					}
				});
			},
			// 获取歌单所有歌曲
			getPlayListAll(pid) {
				uni.request({
					url: 'http://127.0.0.1:3000/playlist/track/all?id=' + pid, //仅为示例，并非真实接口地址。
					success: (res) => {
						this.playListDetail = res.data;
						console.log(this.playListDetail)
						console.log(this.playListDetail.songs.length);
						// this.songUrl="https://music.163.com/song/media/outer/url?id="+res.data.songs[0].id + ".mp3";					
					}
				});
			},
			playSong(url) {
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + url + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
				audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			pauseSong() {
				audio.pause();
			},
			backgroundSong() {
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			nextSong() {
				if (this.index < this.playListDetail.songs.length) {
					this.index = this.index + 1;
				} else {
					this.index = 0;
				}

				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			previousSong() {
				if (this.index > 0) {
					this.index -= 1;
				} else {
					this.index = 0;
				}
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			trigger(e) {
				console.log(e.item)
				if (e.item.text == "播放") {
					// this.content[1] = this.pause;
					this.backgroundSong();
					this.content[1].text = "暂停";
					this.content[1].iconPath = '/static/play.png';
					this.content[1].selectedIconPath = '/static/play.png';
					console.log(this.content[1])
					return
				}
				if (e.item.text == "暂停") {
					this.pauseSong();
					// this.content[1] = this.play;
					this.content[1].iconPath = '/static/pause.png';
					this.content[1].selectedIconPath = '/static/pause.png';
					this.content[1].text = "播放";
					return
				}

				if (e.item.text == "上一首") {
					this.previousSong();
				}
				if (e.item.text == "下一首") {
					this.nextSong();
				}
			},
			tz(detail, id) {
				uni.navigateTo({
					// '/pages/bookDetail/bookDetail?id='
					// console.log(detail),
					url: detail + id,
				})
			}
		}
	}
</script>

<style lang="scss">
	.card-actions {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.warp {
		padding: 10px;
	}

	.button {
		margin-bottom: 10px;
	}

	.message {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	button[plain] {
		border: 0
	}
</style>